<template>
  <div class="custom-table-list-wrapper">
    <div class="search" :class="{ active: toggleSearchStatus }">
      <div class="search-left" ref="searchFromRef">
        <el-form class="search-form" inline>
          <el-form-item label="登录时间">
            <el-date-picker
              v-model="timeArr"
              type="daterange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              @change="handleChangeTime"
            />
          </el-form-item>
          <el-form-item label="关键词">
            <el-input
              class="search-input"
              v-model="searchParams.keywords"
              placeholder="请输入用户名称"
              :suffix-icon="Search"
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
        <a
          class="search-left-toggle"
          v-if="showToggle"
          @click="handleToggleSearch"
        >
          <svg-icon :name="toggleSearchStatus ? 'up' : 'down'" />
          {{ toggleSearchStatus ? '收起' : '展开' }}
        </a>
      </div>
      <div class="search-right">
        <el-button type="primary" @click="initTableList(1)"
          ><svg-icon name="search" size="14px" />搜索</el-button
        >
        <el-button @click="handleResetCustom"
          ><svg-icon name="reset" size="17px" />重置</el-button
        >
      </div>
    </div>
    <div class="content">
      <div class="content-table">
        <el-table class="custom-table" :data="tableData">
          <el-table-column type="index" label="序号" width="60px" />
          <el-table-column prop="loginName" label="用户名称" />
          <el-table-column prop="userName" label="真实姓名" />
          <el-table-column prop="requestIp" label="IP" />
          <el-table-column prop="loginTime" label="登录时间" />
          <el-table-column prop="result" label="登录状态" />
        </el-table>
      </div>
      <div class="content-page">
        <el-pagination
          class="custom-pagination"
          :current-page="paginationParams.pageIndex"
          :page-size="paginationParams.pageSize"
          background
          :page-sizes="[10, 20, 30, 50]"
          layout="total, prev, pager, next, sizes, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="initTableList"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useTableList } from '@/hooks/useTableList'
import { getLoginLogs } from '@/api/manager/systemManage/log.js'
const searchParams = ref({})
const {
  Search,
  toggleSearchStatus,
  showToggle,
  handleToggleSearch,
  tableData,
  paginationParams,
  total,
  initTableList,
  handleSizeChange,
  handleReset,
  handleDelete,
  addRef,
  detailRef,
  currentDetail,
  handleAdd,
  handleEdit,
  handleDetail,
  handleClose,
  searchFromRef,
} = useTableList(searchParams, getLoginLogs)

const timeArr = ref([])
const handleChangeTime = () => {
  if (timeArr.value && timeArr.value.length > 0) {
    searchParams.value.start = timeArr.value[0]
    searchParams.value.end = timeArr.value[1]
  } else {
    searchParams.value.start = ''
    searchParams.value.end = ''
  }
}
const handleResetCustom = () => {
  timeArr.value = []
  handleReset()
}

onMounted(() => {
  initTableList(1)
})
</script>
<style lang="scss" scoped>
@import '@/assets/styles/table.scss';
.content-table {
  height: calc(100% - 50px) !important;
}
</style>
